<!--
 * @Author: ITDLCL
 * @Date: 2024-11-13 10:56:44
 * @LastEditors: ITDLCL
 * @Description:
-->
<!--
license plate
车牌号
-->
<template>
  <view class="license-plate border-top border-bottom d-flex">
    <view class="license-plate_number">
      <view
        class="input"
        v-for="item in 8"
        :key="item"
        :class="{ active: item == licenseNumber.length }"
      >
        <text
          class="text"
          :class="{ 'siyuan-medium': item == 1, 'intel-one-mono-medium': item != 1 }"
        >
          {{ licenseNumber.substr(item - 1, 1) }}
        </text>
        <text class="tip" v-if="item == 8 && licenseNumber.length != 8">新能源</text>
      </view>
    </view>
  </view>
</template>

<script setup>
let props = defineProps({
  licenseNumber: {
    type: String,
    default: "",
  },
  optionName: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.license-plate {
  margin-top: 34rpx;
  flex: 1;
  align-items: center;
  background-color: #f2f2f2;
  &_number {
    width: -webkit-fill-available;
    padding: 50rpx 24rpx;
    display: grid;
    grid-template-columns: repeat(8, 68rpx);
    grid-template-rows: 68rpx;
    align-content: space-between;
    justify-content: space-between;
    .input {
      background-color: #ffffff;
      border: 2rpx solid #ffffff;
      font-size: 24rpx;
      line-height: 68rpx;
      text-align: center;
      .tip {
        margin-top: 4rpx;
        font-size: 20rpx;
        writing-mode: vertical-lr;
      }
    }
    .input.active {
      border-color: #000000;
    }
  }
}
</style>
